<template>
  <div class="user-data">
    <ul>
      <li>
        <span>用户性别:</span>
        <span v-if="userInfos.sex==0">保密</span>
        <span v-else-if="userInfos.sex==1">男</span>
        <span v-else-if="userInfos.sex==2">女</span>
      </li>
      <li>
        <span>昵称:</span>
        <span>{{userInfos.name}}</span>
      </li>
      <li>
        <span>年龄:</span>
        <span>{{userInfos.age}}</span>
      </li>
      <li>
        <span>手机:</span>
        <span>{{userInfos.phone}}</span>
      </li>
      <li>
        <span>金币:</span>
        <span>{{userInfos.goldCoin}}</span>
      </li>
    </ul>
    <!--    <div class="user_pic">-->
    <!--      <img src="../assets/images/null.gif" alt="">-->
    <!--    </div>-->
  </div>
</template>

<script>

  import {mapState} from "vuex";
  import {user_data} from "../api";

  export default {
    name: "userdata",
    data() {
      return {
        userInfos: {
          sex: '',
          name: '',
          age: '',
          phone: '',
          profilePicture: '',
          goldCoin: ''
        }
      }
    },
    mounted() {
      if (this.$store.getters.userInfo.name) {
        this.userInfos = this.$store.getters.userInfo
      } else {
        user_data().then((res) => {
          console.log(res)
          this.userInfos = res.data.data
          this.$store.commit('handleUserInfo', this.userInfos)
        })
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.userInfo
      }),
      userInfo: {
        get() {
          return this.$store.state.userInfo
        },
        set(val) {
          this.$store.state.userInfo = val
        }
      }
    },
    watch: {
      userInfo() {
        this.userInfos = this.$store.getters.userInfo
      }
    }
  }
</script>

<style scoped lang="less">
  .user-data {
    font-size: 14px;
    /*background-color: #fff;*/
    background-color: #e4e3e3;
    width: 100%;
    height: 100vh;
    padding-top: 30px;

    ul {
      padding: 13px 13px 0;
      display: flex;
      text-align: left;
      flex-direction: column;

      li {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #b1b6bb;
      }
    }

    .user_pic {
      width: 120px;
      height: 150px;
      position: absolute;
      top: 206px;
      right: 0px;
      border: 5px solid #FFF;

      img {
        width: 110px;
        height: 150px;
        border: 1px #CCCCCC solid;
        padding: 1px;
      }
    }
  }
</style>
